<template>
  <div class="map-box" :style="{ width: width, height: height }">
    <input id="pickerInput" placeholder="输入关键字选取地点"/>
    <div id="poiInfo"></div>
    <div id="amap" class="amap"></div>
  </div>
</template>
<script>
window._AMapSecurityConfig = {
  securityJsCode: 'af8b33216f19ccb9139e7862d6abd77e'
}
import AMapLoader from "@amap/amap-jsapi-loader";

export default {
  props: {
    width: {type: String, default: '100%'},
    height: {type: String, default: '400px'},
    lnglat: {
      type: Array,
      validator: value => {
        return value.length === 2
      }
    }
  },
  data() {
    return {
      address: '',
      point: this.lnglat,
      map: null
    }
  },
  mounted() {
    this.init(this.point)
  },
  methods: {
    // 初始化
    init(lnglat) {
      AMapLoader.load({
        key: 'a3d2db80b4a746df526f6b5390805f56', // 设置您的key
        checkVersion: '2.0',
        plugins: [
          'AMap.ToolBar',
          'AMap.Driving',
          'AMap.Geolocation',
          'AMap.Geocoder'
        ],
        AMapUI: {
          checkVersion: '1.1',
          plugins: ['misc/PoiPicker', 'misc/PositionPicker']
        },
        Loca: {
          checkVersion: '2.0'
        }
      })
          .then(AMap => {
            var map = (this.map = new AMap.Map('amap', {
              viewMode: '2D',
              zoom: 15,
              center: lnglat
            }))
            var that = this
            AMapUI.load(['lib/$'], function ($) {
              // $ 即为UI组件库最终使用的DomLibrary
              AMapUI.loadUI(['misc/PoiPicker', 'misc/PositionPicker'], function (
                  PoiPicker,
                  PositionPicker
              ) {
                var positionPicker = new PositionPicker({
                  mode: 'dragMap', // 设定为拖拽地图模式，可选'dragMap'、'dragMarker'，默认为'dragMap'
                  map: map // 依赖地图对象
                })
                positionPicker.on('success', function (positionResult) {
                  console.log(positionResult)
                  that.$emit(
                      'location',
                      [positionResult.position.lat, positionResult.position.lng],
                      positionResult.address,
                      positionResult.regeocode.addressComponent
                  )
                })
                positionPicker.on('fail', function (positionResult) {
                  console.log(positionResult)
                })
                if (lnglat !== null) {
                  positionPicker.start(lnglat)
                } else {
                  positionPicker.start()
                }
                var poiPicker = new PoiPicker({
                  input: 'pickerInput' // 输入框id
                })
                // 监听poi选中信息
                poiPicker.on('poiPicked', function (poiResult) {
                  // 用户选中的poi点信息
                  console.log(poiResult)
                  // var source = poiResult.source
                  var poi = poiResult.item

                  // marker.setMap(map)
                  // marker.setPosition(poi.location)
                  map.setCenter(poi.location)
                  positionPicker.start(poi.location)
                })
              })
            })
          })
          .catch(e => {
            console.log(e)
          })
    },
    commit() {
      this.$emit('location', this.point, this.address)
    },
    destroy() {
      this.map.destroy()
    }
  }
}
</script>
<style lang="scss" scoped>
#pickerBox {
  position: absolute;
  z-index: 9999;
  top: 50px;
  right: 30px;
  width: 300px;
}

#pickerInput {
  width: 200px;
  padding: 5px 5px;
}

#poiInfo {
  background: #fff;
}

.map-box {
  box-sizing: border-box;
  background-color: #ddd;

  &:after {
    content: '';
    display: block;
    clear: both;
  }

  .amap,
  .detail {
    float: left;
    height: 100%;
  }

  .amap {
    width: 100%;
  }

  .detail {
    width: 25%;
    background-color: #fff;
    border-left: 1px solid #eee;
    box-sizing: border-box;
    word-wrap: break-word;
  }

  .btnmap {
    width: 100%;
    color: #fff;
    cursor: pointer;
    background-color: #409eff;
    border: none;
    border-radius: 3px;

    &:hover {
      background-color: #66b1ff;
    }
  }
}
</style>
